<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
    </view>
    <image
      class="bg"
      :src="
        type
          ? 'https://pic.bangbangtongcheng.com/static/ranking_bg1.png'
          : 'https://pic.bangbangtongcheng.com/static/ranking_bg.png'
      "
      mode="widthFix"
    />
    <scroll-view
      class="list"
      :style="'height:calc( 100vh - 300rpx);'"
      scroll-y
      refresher-background="#f5f5f5"
    >
      <view class="list_box">
        <view class="picker_box">
          <picker mode="date" fields="month" :value="day" @change="changeDay">
            <view class="flex_end">
              <view>{{ day }}</view>
              <u-icon name="arrow-down" size="15" color="#333"> </u-icon>
            </view>
          </picker>
        </view>
        <view v-if="showContent.content">
          <view class="table">
            <view class="table_item">
              <view class="item">名次</view>
              <view class="item item1">用户</view>
              <view class="item item2">发布数量</view>
            </view>
            <view class="table_item table_item_user">
              <view class="item">{{ myRanking.rank }}</view>
              <view class="item item1">
                <image
                  class="header"
                  :src="
                    myRanking.image ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                  "
                  mode="scaleToFill"
                />
                <view class="name">{{ myRanking.nike_name || "未命名用户" }}</view>
              </view>
              <view class="item item2">{{ myRanking.num }}</view>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <swiper
            autoplay
            :display-multiple-items="10"
            vertical
            :interval="600"
            :duration="duration"
            easing-function="linear"
            acceleration
            class="swiper"
            @change="swiperChange"
          >
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <swiper
            autoplay
            :display-multiple-items="10"
            vertical
            :interval="400"
            :duration="duration"
            easing-function="linear"
            acceleration
            class="swiper"
            @change="swiperChange"
          >
          <!-- #endif -->
            <swiper-item v-for="(item, index) in shopList" :key="index">
              <view class="table_item">
                <!-- <view class="item" v-if="index == 0"> No.1 </view>
                <view class="item" v-else-if="index == 1"> No.2 </view>
                <view class="item" v-else-if="index == 2"> No.3 </view>
                <view class="item" v-else>
                  {{ index + 1 }}
                </view> -->
                <view class="item">
                  {{ index + 1 }}
                </view>
                <view class="item item1">
                  <image
                    class="header"
                    :src="
                      item.image ||
                      'https://pic.bangbangtongcheng.com/static/my/header.png'
                    "
                    mode="scaleToFill"
                  />
                  <view class="name">{{ item.nike_name || "未命名用户" }}</view>
                </view>
                <view class="item item2">{{ item.num }}</view>
              </view>
            </swiper-item>
            <!-- #ifndef MP-WEIXIN -->
              <swiper-item>
                <view class="table_item">
                </view>
              </swiper-item>
            <!-- #endif -->
            <!-- <swiper-item>
              <view class="table_item">
              </view>
            </swiper-item> -->
          </swiper>
          <view class="title"> 排名规则 </view>
          <view class="date" v-if="day1">
            活动时间:{{ day1.split("-")[0] }}年{{ day1.split("-")[1] }}月{{
              day1.split("-")[2]
            }}日至{{ day2.split("-")[0] }}年{{ day2.split("-")[1] }}月{{
              day2.split("-")[2]
            }}日
          </view>
          <text class="content">
            {{ showContent.content || "" }}
          </text>
        </view>
        <view class="none" v-else> 当月暂未举办共享活动。 </view>
      </view>
    </scroll-view>
    <uniBall></uniBall>
  </view>
</template>

<script>
import permision from "@/js_sdk/wa-permission/permission.js";
//#ifdef H5
import wxshare from "../utils/index.js";
//#endif
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      latitude: "", //纬度
      longitude: "", //经度
      pageSize: 10,
      shopName: "",
      pageNo: 1,
      shopList: [],
      statusBarHeight: 0,
      trigger: false,
      downStatus: true,
      upStatus: true,
      imgUrl: this.$imgSrc,
      firstSearch: true,
      day: "",
      userInfo: uni.getStorageSync("Pduser"),
      showContent: {},
      myRanking: {},
      day1: "",
      day2: "",
      type: "",
      duration: 2000,
    };
  },
  onLoad(options) {
    if (options.type) {
      this.type = options.type;
    }
    // #ifdef MP-WEIXIN
    this.duration = 600
    // #endif
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
    this.day =
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1 > 9
        ? new Date().getMonth() + 1
        : "0" + (new Date().getMonth() + 1));
    this.getData();
  },
  async onPullDownRefresh() {},
  methods: {
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    changeDay(e) {
      this.day = e.detail.value;
      this.getData();
    },
    async getData() {
      let that = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      if (this.type) {
        await this.$myRequest
          .get("/api/mobile/vehicleOwner/getSharedRanking", {
            createDate: this.day,
            pageSize: 99999,
            pageNo: 1,
            id: this.userInfo.id,
          })
          .then((res) => {
            this.shopList = res.list;
            this.myRanking = res.myRanking;
            console.log(res);
          });
        this.showContent = {};
        this.day1 = "";
        this.day2 = "";
        await this.$myRequest
          .get("/api/mobile/public/getRankSet", {
            createDate: this.day,
          })
          .then((res) => {
            console.log(res.rankset.length);
            if (res.rankset.length != 0) {
              this.showContent = res.rankset[0];
              this.day1 = this.showContent.month_star + "-01";
              this.day2 =
                this.showContent.month_end +
                "-" +
                new Date(
                  this.showContent.month_end.split("-")[0],
                  this.showContent.month_end.split("-")[1],
                  0
                ).getDate();
            }
            uni.hideLoading();
          });
      } else {
        await this.$myRequest
          .get("/mob/home/getSharedRanking", {
            createDate: this.day,
            pageSize: 99999,
            pageNo: 1,
            id: this.userInfo.id,
          })
          .then((res) => {
            this.shopList = res.list;
            this.myRanking = res.myRanking;
            console.log(res);
          });
        this.showContent = {};
        this.day1 = "";
        this.day2 = "";
        await this.$myRequest
          .get("/api/mobile/public/getRankSet", {
            createDate: this.day,
          })
          .then((res) => {
            console.log(res.rankset.length);
            if (res.rankset.length != 0) {
              this.showContent = res.rankset[0];
              this.day1 = this.showContent.month_star + "-01";
              this.day2 =
                this.showContent.month_end +
                "-" +
                new Date(
                  this.showContent.month_end.split("-")[0],
                  this.showContent.month_end.split("-")[1],
                  0
                ).getDate();
            }
            uni.hideLoading();
          });
      }
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    searchList() {
      this.firstSearch = true;
      this.pageSize = "10";
      this.pageNo = "1";
      this.getShopInfo(1);
    },
    getShopInfo(type) {
      let that = this;
      this.$myRequest
        .get("/mob/user/getShopInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          latitude: this.latitude,
          longitude: this.longitude,
          shopName: this.shopName,
          status: "1",
          shopType: "1",
        })
        .then((res) => {
          uni.hideLoading();
          console.log(res);
          if (res.page.count < this.pageNo * this.pageSize) {
            this.downStatus = false;
          } else {
            this.downStatus = true;
          }
          if (type) {
            this.shopList = res.page.list;
          } else {
            this.shopList = this.shopList.concat(res.page.list);
          }
          this.firstSearch = false;
          uni.stopPullDownRefresh();
        });
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    swiperChange(e) {
      console.log(e.detail.current);
      // #ifndef MP-WEIXIN
      if (e.detail.current > this.shopList.length - 10) {
        this.duration = 100;
      } else {
        this.duration = 2000;
      }
      // #endif
      // #ifdef MP-WEIXIN
      if (e.detail.current > this.shopList.length - 11) {
        this.duration = 300;
      } else {
        this.duration = 600;
      }
      // #endif
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  /* position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333; */
  padding-top: 300rpx;
  background-color: #fff;
}
.bg {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
}
.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: transparent;

  image {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }
}

.sousuo {
  position: relative;
  width: 686rpx;
  height: 72rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  border: 2rpx solid #64b6a8;
  border-radius: 36rpx;

  image {
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    margin-left: 20rpx;
    margin-top: 12rpx;
  }

  input {
    display: inline-block;
    width: 400rpx;
    height: 50rpx;
    line-height: 52rpx;
    margin-top: 12rpx;
    vertical-align: top;
    font-size: 28rpx;
  }

  .quxiao {
    position: absolute;
    top: 4rpx;
    right: 4rpx;
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    text-align: center;
    background: #64b6a8;
    border-radius: 30rpx;
  }
}

.list {
  // margin-top: 32rpx;
  // margin-left: 30rpx;
  width: 690rpx;
  margin: 0 30rpx;
  .list_box {
    border-radius: 24rpx;
    background: #ffffff;
    height: 1000rpx;
    padding: 30rpx;
    .picker_box {
      width: 200rpx;
      height: 50rpx;
      border: 2rpx solid #999;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      .flex_end {
        width: 100%;
        height: 46rpx;
      }
      picker {
        width: 100%;
        height: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }
  }
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
.fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 40;
}
.table {
  .table_item {
    padding: 0 30rpx;
    display: flex;
    height: 60rpx;
    align-items: center;
    border-radius: 12rpx 12rpx 0px 0px;
    background: #5dd0bc;
    color: #fff;
    .item {
      width: 160rpx;
      font-size: 30rpx;
      line-height: 1;
    }
    .item1 {
      width: 290rpx;
    }
    .item2 {
      width: calc(100% - 290rpx - 160rpx);
    }
  }
  .table_item_user {
    margin-bottom: 40rpx;
    border-radius: 0px 0px 12rpx 12rpx;
    color: #3d3d3d;
    background: #f2f2f2;
    .item1 {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .header {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        border-radius: 50%;
      }
      .name {
        width: calc(100% - 60rpx);
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
    .item2 {
      text-align: right;
    }
  }
}
.swiper {
  height: 760rpx;
  margin-bottom: 40rpx;
  .table_item {
    padding: 0 30rpx;
    display: flex;
    line-height: 40rpx;
    align-items: center;
    border-radius: 12rpx 12rpx 0px 0px;
    color: #3d3d3d;
    padding-bottom: 40rpx;
    box-sizing: content-box;
    .item {
      width: 160rpx;
      font-size: 28rpx;
      line-height: 1;
      .header {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        border-radius: 50%;
      }
      .name {
        width: calc(100% - 60rpx);
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
    .item1 {
      width: 290rpx;
      display: flex;
      align-items: center;
    }
    .item2 {
      width: calc(100% - 290rpx - 160rpx);
      text-align: right;
    }
  }
}
.title {
  font-size: 32rpx;
  line-height: 45rpx;
  color: #3d3d3d;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.date {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #64b6a8;
  margin-bottom: 20rpx;
}
.content {
  line-height: 34rpx;
  font-size: 24rpx;
  color: #9b9b9b;
}
.none {
  font-size: 36rpx;
  // color: #9b9b9b;
  padding-top: 200rpx;
}
</style>
